<script>
  export default {
    name: 'TTableBody',
    props: {
      store: {
        required: true,
      },
    },
    render() {
      return (
        <table class="t-table__body">
          <colgroup>
            {this.columns.map((col) => {
              return <col style={{ width: `${col.width}rem` }}></col>;
            })}
          </colgroup>
          <tbody>
            {this.items.map((item) => {
              return <tr>
                {Object.values(item).map((key, index) => {
                  if (index < this.plainColumns.length) {
                    return <td>{key}</td>;
                  }
                  return null;
                })}
                {this.renderColumns.map((col) => {
                  const scope = {};
                  scope.item = item;
                  return <td>{col.render(scope)}</td>;
                })}
                </tr>;
            })}
          </tbody>
        </table>
      );
    },
    computed: {
      columns() {
        return this.store.state.columns;
      },
      plainColumns() {
        return this.store.state.columns.filter((item) => {
          return !item.render;
        });
      },
      renderColumns() {
        return this.store.state.columns.filter((item) => {
          return !!item.render;
        });
      },
      items() {
        return this.store.state.items;
      },
      kits() {
        return this.store.state.kits;
      },
    },
  };
</script>

<style>

</style>